<script lang="ts" setup>
import { ref } from 'vue';

import { message } from 'ant-design-vue';

const loading = ref(false);

const marketItems = ref([
  {
    id: '1',
    name: '预订工作流',
    description: '完整的房间预订流程',
    type: 'workflow',
    price: { type: 'free', currency: 'CNY', amount: 0 },
    rating: 4.8,
    downloads: 1250,
    author: 'HotelTech',
  },
  {
    id: '2',
    name: '动态定价规则',
    description: '智能定价规则引擎',
    type: 'rule',
    price: { type: 'paid', currency: 'CNY', amount: 299 },
    rating: 4.6,
    downloads: 890,
    author: 'PricingAI',
  },
]);

const columns = [
  { title: '能力名称', dataIndex: 'name', key: 'name' },
  { title: '描述', dataIndex: 'description', key: 'description' },
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '价格', dataIndex: 'price', key: 'price' },
  { title: '评分', dataIndex: 'rating', key: 'rating' },
  { title: '下载量', dataIndex: 'downloads', key: 'downloads' },
  { title: '作者', dataIndex: 'author', key: 'author' },
  { title: '操作', key: 'action' },
];

const getTypeColor = (type: string) => {
  const colorMap = {
    workflow: 'blue',
    form: 'green',
    rule: 'purple',
    report: 'orange',
    api: 'cyan',
  };
  return colorMap[type] || 'default';
};

const getTypeLabel = (type: string) => {
  const labelMap = {
    workflow: '工作流',
    form: '表单',
    rule: '规则',
    report: '报表',
    api: 'API',
  };
  return labelMap[type] || type;
};

const buyCapability = (record: any) => {
  message.success(`购买成功: ${record.name}`);
};

const viewDetail = (record: any) => {
  message.info(`查看详情: ${record.name}`);
};
</script>

<template>
  <div class="capability-market">
    <a-table
      :columns="columns"
      :data-source="marketItems"
      :loading="loading"
      row-key="id"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'type'">
          <a-tag :color="getTypeColor(record.type)">
            {{ getTypeLabel(record.type) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'price'">
          <span v-if="record.price.type === 'free'" class="free">免费</span>
          <span v-else class="price">
            {{ record.price.currency }} {{ record.price.amount }}
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button
              type="primary"
              size="small"
              @click="buyCapability(record)"
            >
              购买
            </a-button>
            <a-button size="small" @click="viewDetail(record)">详情</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style lang="less" scoped>
.capability-market {
  .free {
    color: #52c41a;
    font-weight: bold;
  }

  .price {
    color: #f5222d;
    font-weight: bold;
  }
}
</style>
